<template>
	<view :class="{ 'r-sidebar': true }" :style="getComponentThemeStyle">
		<slot></slot>
	</view>
</template>
<script setup>
import { CONFIG_PROVIDER_KEY, SIDEBAR_KEY } from '@/uni_modules/r-utils-constant/js_sdk/index.js';
import { getComponentThemeCssVar } from '@/uni_modules/r-theme-base/js_sdk/useComponentTheme.js';
import { inject, computed, nextTick, provide, ref } from 'vue';
import { datas } from '../themes/index.js';
const emit = defineEmits(['change', 'update:value']);
const props = defineProps({
	value: {
		type: [Number, String],
		default: 0
	},
	themeName: {
		type: [String],
		default: 'default'
	}
});
const componentsName = 'r-sidebar';
const themeInject = inject(CONFIG_PROVIDER_KEY, {});

const getComponentThemeStyle = computed(() => {
	let themeName = props.themeName;

	if (themeInject?.value?.themeName) {
		//传递过来的有就用传递了
		themeName = themeInject?.value?.themeName;
	}
	if (props.themeName != 'default') {
		//单独设置了组件的 就用单独设置的
		themeName = props.themeName;
	}

	return {
		...getComponentThemeCssVar(themeName, 'r-base', datas.value),
		...getComponentThemeCssVar(themeName, componentsName, datas.value)
	};
});
const children = ref([]);
const setChildren = (e) => {
	children.value = [...children.value, e];
};
const getActive = () => props.value;
const setActive = (value) => {
	if (value !== getActive()) {
		emit('update:value', value);
		nextTick(() => {
			emit('change', value);
		});
	}
};

provide(SIDEBAR_KEY, {
	getActive,
	setActive,
	setChildren,
	children
});
</script>
<style lang="scss" scoped>
.r-sidebar {
	width: var(--r-sidebar-width);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
</style>
